<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="top">
				<view class="search-header">
					<view class="search-bar-box">
						<view class="search-bar">
							<u-icon name="search" size="20" color="#999999"></u-icon>
							<input type="text" placeholder="请输入关键字搜索" placeholder-class="placeholder" v-model="keywords"
								@input="$u.throttle(refreshList, 1000)" />
						</view>
						<u-icon name="plus-circle" size="20" color="#FE4F04" @click="navigatorToAdd"></u-icon>
					</view>
					<view class="search-tip-box">
						<text>共 {{dataTotal}} 项</text>
					</view>
				</view>
			</view>
			<view class="project-list">
				<view class="project-item" v-for="(item, index) in dataList" :key="index" @click="handleSelect(item)">
					<view class="project-name">{{ item.name }}</view>
					<view class="project-price">
						<text>{{item.money}}元</text>
						<view class="icon-arrow" v-if="isUpdate">
							<u-icon name="arrow-right" size="28rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view slot="bottom">
				<view class="safe-bottom page-bottom">
					<view class="action-btn-group">
						<view class="action-btn" @click="isUpdate = !isUpdate" v-if="!isUpdate">编辑模式</view>
						<view class="action-btn " @click="isUpdate = !isUpdate" v-else>退出编辑</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		chargeList
	} from '@/api/landlord'
	export default {
		data() {
			return {
				isUpdate: false, // 是否编辑模式
				keywords: '',
				dataList: [], // 数据列表
				dataTotal: 0, // 数据总数
			}
		},
		onShow() {
			this.queryList(); // 页面显示时刷新列表
		},
		methods: {
			navigatorToAdd() {
				uni.navigateTo({
					url: '/pages-landlord/room-manage/costs-add'
				});
			},
			handleSelect(item) {
				let projectInfo = JSON.stringify({
					id: item.id,
					name: item.name,
					money: item.money,
					pay_type: item.pay_type,
				});
				if (this.isUpdate) {
					uni.navigateTo({
						url: '/pages-landlord/room-manage/costs-add?projectInfo=' + projectInfo
					});
				} else {
					uni.$emit('selectFixedCosts', item);
					uni.navigateBack({
						delta: 1
					});
				}
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			confirmSelectData(item) {
				uni.$emit('selectBuilding', item);
				uni.navigateBack({
					delta: 1
				});
			},
			queryList(pageNo, pageSize) {
				chargeList({
					kw: this.keywords,
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
					this.dataTotal = res.data.data.length; // 更新数据总数
					this.$forceUpdate()
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		z-index: 95;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;


		.action-btn-group {
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			flex: 1;

			.action-btn {
				width: 100%;
				height: 88rpx;
				border: 2rpx solid #FE4F04;
				font-weight: bold;
				font-size: 30rpx;
				color: #FE4F04;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx
			}
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #F5F6F7;
	}

	.search-header {
		flex-shrink: 0;
		padding: 20rpx 30rpx;

		.search-bar-box {
			display: flex;
			align-items: center;

			.search-bar {
				flex: 1;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 16rpx 24rpx;
				margin-right: 20rpx;
			}

			.search-bar input {
				flex: 1;
				margin: 0 20rpx;
				font-size: 14px;
			}

			.placeholder {
				color: #999999;
			}
		}

		.search-tip-box {
			font-size: 22rpx;
			color: #999999;
			margin: 20rpx 0;
		}
	}

	.project-list {
		margin: 0 32rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx;

		.project-item {
			display: flex;
			padding: 20rpx 40rpx;
			align-items: center;
			justify-content: space-between;
			min-height: 60rpx;

			.project-name {
				flex: 1;
				font-size: 28rpx;
				color: #666666;
			}

			.project-price {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #222222;

				.icon-arrow {
					margin-left: 10rpx;
				}
			}

			.active {
				color: #FE4F04;
			}
		}
	}
</style>